import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../page/home/convenient/repair/repair_home_controller.dart';
import 'custom_button.dart';

class CustomOrderFilter extends StatefulWidget {
  var repairTypeList = <TabModel>[
    TabModel(0, '全部'),
    TabModel(1, '户内'),
    TabModel(2, '公区')
  ];
  var urgentTypeList = <TabModel>[
    TabModel(0, '全部'),
    TabModel(1, '一般'),
    TabModel(2, '紧急'),
    TabModel(3, '非常急')
  ];

  int repairId = 0;
  int urgentId = 0;
  late final GestureTapCallback? onTapReset;
  late final GestureTapCallback? onTapConfirm;
  VoidCallback? onFilterSelected;

  CustomOrderFilter(
      {super.key,
      required this.repairId,
      required this.urgentId,
      this.onTapReset,
      this.onTapConfirm,
      this.onFilterSelected});

  @override
  State<StatefulWidget> createState() {
    return CustomOrderFilterState();
  }
}

class CustomOrderFilterState extends State<CustomOrderFilter> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(32.w),
      height: 480.h,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '报修区域',
            style: TextStyle(fontSize: 32.sp, color: const Color(0XFF333333)),
          ),
          _builderDropdownTabBarWidget(widget.repairTypeList, widget.repairId),
          Text(
            '紧急程度',
            style: TextStyle(fontSize: 32.sp, color: const Color(0XFF333333)),
          ),
          _builderDropdownTabBarWidget(widget.urgentTypeList, widget.urgentId),
          Container(
            height: 2.h,
            color: const Color(0XFFF0F2F7),
          ),
          Expanded(
            flex: 1,
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(top: 31.h, right: 17.w),
                    height: 72.h,
                    decoration: BoxDecoration(
                      color: const Color(0XFFF0F2F7),
                      borderRadius: BorderRadius.circular(36.h),
                    ),
                    child: CustomButton(
                      isAsh: false,
                      text: '重置',
                      textColor: const Color(0XFF6D6D6D),
                      bgColorList: const [Color(0XFFF0F2F7)],
                      onPressed: widget.onTapReset,
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(top: 31.h, left: 17.w),
                    height: 72.h,
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(colors: [
                        Color(0XFF0A4EF1),
                        Color(0XFF7AE0E7),
                      ]),
                      borderRadius: BorderRadius.circular(36.h),
                    ),
                    child: CustomButton(
                      isAsh: false,
                      text: '确认',
                      onPressed: widget.onTapConfirm,
                    ),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _builderDropdownTabBarWidget(List<TabModel> dataList, int? enableId) {
    // var dataList = isRepair ? widget.repairTypeList :widget.urgentTypeList;
    // var enableId = isRepair ? widget.repairId : widget.urgentId;

    return Container(
      padding: EdgeInsets.only(top: 16.h, bottom: 40.h),
      height: 112.h,
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemExtent: 172.w,
        children: dataList.map(
          (model) {
            var isEnable = enableId == model.id;
            return InkWell(
              onTap: () {
                setState(() {
                  if (dataList == widget.repairTypeList) {
                    widget.repairId = model.id;
                  } else if (dataList == widget.urgentTypeList) {
                    widget.urgentId = model.id;
                  }
                  widget.onFilterSelected;
                });
              },
              child: Stack(
                children: [
                  Container(
                    width: 128.w,
                    height: 52.h,
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(left: 22.w, top: 4.h, right: 22.w),
                    decoration: BoxDecoration(
                      color: isEnable ? Colors.white : const Color(0XFFF0F2F7),
                      borderRadius: BorderRadius.circular(26.h),
                      border: isEnable
                          ? Border.fromBorderSide(
                              BorderSide(
                                color: const Color(0XFF1774E0),
                                width: 2.w,
                              ),
                            )
                          : null,
                    ),
                    child: Text(
                      model.title,
                      style: TextStyle(
                        color: model.id == enableId
                            ? const Color(0XFF1774E0)
                            : const Color(0XFF6D6D6D),
                        fontSize: 32.sp,
                      ),
                    ),
                  ),
                  Visibility(
                    visible: model.id == enableId,
                    child: Positioned(
                      top: 0,
                      right: 22.w,
                      child: Container(
                        width: 23.r,
                        height: 23.r,
                        alignment: Alignment.center,
                        decoration: const BoxDecoration(
                          color: Color(0xFF1774E0),
                          shape: BoxShape.circle,
                        ),
                        child: Image.asset(
                            'assets/images/icon_check_enable.png',
                            width: 24.h,
                            height: 24.h),
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ).toList(),
      ),
    );
  }
}
